<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
</head>

<body>
    全选
    <input type="checkbox" name="" id="" class="checkAll">
    <input type="checkbox" name="" id="" class="j_check" checked>
    <input type="checkbox" name="" id="" class="j_check">
    <input type="checkbox" name="" id="" class="j_check">
    全选
    <input type="checkbox" name="" id="" class="checkAll">
    <script>
        $(function () {
            $(".checkAll").change(function () {
                // console.log($(this).prop("checked"))
                $(".j_check ,.checkAll").prop("checked", $(this).prop("checked"));
            });
            //如果小复选框被选中的个数等于三 就应该把全选按钮选上 否则全选按钮不选

            $(".j_check").change(function () {
                // console.dir(".j_check:checked");
                // $(".j_check").length是 所有的复选框的个数
                if ($(".j_check:checked").length === $(".j_check").length) {
                    $(".checkAll").prop("checked", true);
                } else {
                    $(".checkAll").prop("checked", false);
                }
            })
        })
    </script>
</body>

</html>